<template>
	<div>
		<div class="login-wrapper">
			<div class="logo"></div>
			<div class="login-msg">
				<div class="name-wrapper">
					<i class="name-icon"></i>
					<input type="text" class="input-required" placeholder="手机号/用户名" v-model="username" maxlength="20" v-on:focus="loginname">
				</div>
				<div class="keywords-wrapper">
					<i class="keywords-icon"></i>
					<input :type="loginkeyword" class="input-required-password"  placeholder="请输入密码"  v-model="password" maxlength="15" v-on:focus="loginname">
					<a class="check-password" :class="{kanmima:yanjing}" @click="changePassWordtype"></a>
				</div>
				<div class="warn">
					<div class="warm-show" v-show="loginshow">
						<i class="warn-icon"></i>
						<span>账号或密码错误</span>
					</div>
				</div>
				<button class="login-bnt" v-on:click="login">登陆</button>
				<div class="login-text">
					<div class="login-message">
						<a :href="'#/oauth/message'">短信验证登陆</a>
					</div>
					<div class="login-txt-main">
						<a class="login-regist" :href="'#/oauth/regist'">新用户注册</a>
						<span>丨</span>
						<a class="forget-password" :href="'#/oauth/forgetpassword'">忘记密码？</a>
					</div>
				</div>
			</div>
			<div class="third-login">
				<div class="third-title">使用第三方账号登陆</div>
				<div class="third-app-wrapper">
					<div class="app-main-wechat">
						<a class="wechat"></a>
					</div>
					<div class="app-main-qq">
						<a class="qq"></a>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import {setCookie,getCookie} from '../../modules/oauth/cookie.js'
export default {
	data () {
	    return {
	    	username:'',
	    	password:'',
	    	loginshow:false,
	    	forgetshow:false,
	    	loginkeyword:'password',
	    	yanjing:false,
	    	id:'',
	    }
	},
	 methods: {
	 	changePassWordtype(){
	 		if(this.loginkeyword==='password'){
	 			this.loginkeyword='tel';
	 			this.yanjing=true;
	 		}else{
	 			this.loginkeyword='password';
	 			this.yanjing=false;
	 		}
	 	},
	 	login(){
	        if(this.username == "" || this.password == ""){
	            this.loginshow=true;
	        }else{
	            let data = {'mobile':this.username,'password':this.password}
	            axios.post('/api/oauth/login',data).then((res)=>{
	              if(res.data.resp_msg.msg_code == 400){
	              	this.loginshow=true;
	              }else{
	              	this.loginshow=false;
	              	this.id=res.data.resp_data.user.id;
	                setCookie('username',this.username,1000*60);
	                if(!res.data.resp_data.user.user_type||res.data.resp_data.user.user_type==0){
	                	this.$router.push('/oauth/choiceidentity/'+this.id);
		                }else{
		                	this.$router.push('/oauth/home'); 	
		                }
	            	}
		        })
		    }
		},
		loginname(){
			this.loginshow=false;
		}
	},
	mounted() {
//		    if(getCookie('username')){
//		        this.$router.push('/oauth/home')
//		    }
	},
	computed: {

	}
	}	
</script>
<style>
@import url("../../styles/common/oauth/oauth-common.css");
.login-wrapper{}
.login-wrapper .logo{width:130px;height:83px;margin:30px auto;background: url(../../static/oauth-img/logo.png) no-repeat;background-size:130px 83px;}
.login-wrapper .login-msg{padding:0 12px;}
.name-wrapper,.keywords-wrapper{height: 24px;padding:10px;border-radius:4px;border:1px solid #eee;margin-bottom:10px;display: flex;background:#f9f9f9;}
.name-wrapper i,.keywords-wrapper i{display: inline-block;flex: 0 0 20px;width: 20px;height: 20px;vertical-align:top;margin-top:2px;margin-right: 15px;}
.name-wrapper i.name-icon{background: url(../../static/oauth-img/user.png) no-repeat;background-size:20px 20px;}
.input-required,.input-required-password{display: inline-table;flex: 1;color: #888;}
.keywords-wrapper i.keywords-icon{background: url(../../static/oauth-img/password.png) no-repeat;background-size:20px 20px;}
.check-password{display: inline-block;flex:0 0 24px;margin-left:20px;background: url(../../static/oauth-img/password-on.png) no-repeat;background-size:20px 20px;vertical-align: top;margin-top:3px;}

.login-bnt{height: 44px;width:100%;border-radius:4px;background: #008cf0;line-height: 44px;text-align: center;font-size: 16px;color: #fff;margin-top:5px;}
.login-text{height: 20px;margin-top: 20px;line-height: 20px;font-size: 14px;display: flex;}
.login-text .login-message{flex:4;text-align:left;}
.login-text .login-message a{display: inline-block;color: #888;}
.login-text .login-txt-main{flex:6;text-align:right;color: #888;}
.login-text .login-txt-main a{display: inline-block;color: #888;}
.login-text .login-txt-main span{margin: 0 3px;}
.login-wrapper .third-login{padding:0 12px;margin-top:50px;}
.third-title{width:100%;height: 30px;background: url(../../static/oauth-img/line-bg.png) no-repeat center center/cover;
background-size:100% 30px;text-align: center;line-height: 30px;font-size: 14px;color:#888;}
.third-app-wrapper{width:180px;margin:30px auto 0 auto;display: flex;height: 40px;}
.app-main-wechat{flex:1;}
.app-main-wechat a.wechat{display: block;width: 28px;height: 28px;margin: 0 auto;border-radius: 50%;padding:6px;
background: url(../../static/oauth-img/wechat.png) no-repeat center center #00cb43;background-size:28px 28px;}
.app-main-qq{flex:1;}
.app-main-qq a.qq{display: block;width: 24px;height: 24px;margin: 0 auto;border-radius: 50%;padding:8px;
background: url(../../static/oauth-img/qq.png) no-repeat center center #00a8ff;background-size:24px 24px;}
</style>